<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>新增修改收货地址</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link href="/weixin/css/mui.min.css" rel="stylesheet" />
		<link href="/weixin/css/mui.picker.css" rel="stylesheet" />
		<link href="/weixin/css/mui.poppicker.css" rel="stylesheet" />
		<style type="text/css">
			#showCityPicker3{
			   float: left;
			   width: 59%;
			}
			.lmj-right-arrow{
				display: inline-block;
				margin-top: 9px;
				color: rgba(0,0,0,0.2);
				font-size:24px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
		    <h1 id="headerTitle" class="mui-title">新增收货地址</h1>
		    <button class="mui-btn mui-btn-blue mui-btn-link mui-pull-right" id="saveAddrBtn">保存</button>
		</header>
		<div class="mui-content">
			<form class="mui-input-group">
				<div class="mui-input-row">
					<label>姓名</label>
					<input type="text" class="mui-input-clear" id="name" placeholder="姓名" maxlength="20">
				</div>
				<div class="mui-input-row">
					<label>手机号</label>
					<input type="tel" class="mui-input-clear" id="mobile" placeholder="手机号" maxlength="15">
				</div>
				<div class="mui-input-row">
					<label>省</label>
					<input id="province" type="text" placeholder="省" readonly="readonly"><span id="provinceId"></span><span class="lmj-right-arrow">&gt;</span>
				</div>
				<div class="mui-input-row">
					<label>市</label>
					<input id="city" type="text" placeholder="市" readonly="readonly"><span id="cityId"></span><span class="lmj-right-arrow">&gt;</span>
				</div>
				<div class="mui-input-row">
					<label>区县</label>
					<input id="district" type="text" placeholder="区县" readonly="readonly"><span id="districtId"></span><span class="lmj-right-arrow">&gt;</span>
				</div>
				<div class="mui-input-row">
					<label>详细地址</label>
					<input id="address" type="text" class="mui-input-clear" placeholder="详细地址" maxlength="50">
				</div>
			</form>
		</div>
		<script src="/weixin/js/mui.min.js"></script>
		<script src="/weixin/js/jquery.min.js"></script>
		<script src="/weixin/js/comment.js"></script>
		<script src="/weixin/js/mui.picker.js"></script>
		<script src="/weixin/js/mui.poppicker.js"></script>
		
		<script type="text/javascript">
			mui.init();
			mui.ready(function(){
		        //获得url carInfoId参数
		        var addressId = getUrlParam('addressId');
		        if(addressId!=''){
					//执行修改代码
					jQuery("#headerTitle").text("修改收货地址");
					jQuery.ajax({
						url:ajaxUrlPath+'/wx/address/detail',
						data:{
							id:addressId
						},
						type:'get',
						success:function(data){
							jQuery("#name").val(data.name);
							jQuery("#mobile").val(data.mobile);
							jQuery('#provinceId').text(data.provinceId);
							jQuery('#cityId').text(data.cityId);
							jQuery('#districtId').text(data.districtId);
							jQuery("#address").val(data.address);
							jQuery("#saveAddrBtn").attr('data-id', data.id);
							//获取省、市、区
							getCityDetail(data.districtId);
						}
					});
				}
		        
		        
		        function getCityDetail(districtId){
		        	jQuery.ajax({
						url:ajaxUrlPath+'/wx/address/cityDetail',
						type:'get',
						data:{
							id:districtId
						},
						async:false,
						success:function(data){
							var cityDetail=data.split(',');
							jQuery("#province").val(cityDetail[1]);
							jQuery("#city").val(cityDetail[2]);
							jQuery("#district").val(cityDetail[3]);
						},
						error:function(){
							jQuery("#province").val('未填写');
							jQuery("#city").val('未填写');
							jQuery("#district").val('未填写');
						}
					});
		        }
		        
		        function ajaxPicker(ajaxUrl,dataPar,dataParData){
					var data = {},Par=dataPar;
					data[Par]=dataParData;
					var arr=[];
					jQuery.ajax({
						url:ajaxUrl,
						data:data,
						type:'get',
						async:false,
						success:function(data){
							for(var j=0;j<data.length;j++){
								var obj={};
								obj.id=data[j].id;
								obj.text=data[j].name;
								arr.push(obj);
							}
						}
					});
					return arr;
				}
		        
		        jQuery('#province').bind('tap', function() {
					var provinceData=ajaxPicker(ajaxUrlPath+'/city/findAllProvince',"","")
					var picker1= new mui.PopPicker();
					picker1.setData(provinceData);
					picker1.show(function(items) {
						jQuery('#province').val(items[0].text);
						jQuery('#provinceId').text(items[0].id);
					});
				});
					
				jQuery('#city').bind('tap', function() {
					if(jQuery('#province').val()==""){
						mui.alert('请先选择省份', '美丽乡村');
					}else{
						var provinceId=jQuery('#provinceId').text();
						var cityData=ajaxPicker(ajaxUrlPath+'/city/findAllCity',"provinceId",provinceId);
						var picker2 = new mui.PopPicker();
						picker2.setData(cityData);
						picker2.show(function(items) {
							jQuery('#city').val(items[0].text);
							jQuery('#cityId').text(items[0].id);
						});
					}
					
				});	
				
				jQuery('#district').bind('tap', function() {
					if(jQuery('#city').val()==""){
						mui.alert('请先选择市', '美丽乡村');
					}else{
						var cityId=jQuery('#cityId').text();
						var districtData=ajaxPicker(ajaxUrlPath+'/city/findAllcounty',"cityId",cityId);
						var picker3 = new mui.PopPicker();
						picker3.setData(districtData);
						picker3.show(function(items) {
							jQuery('#district').val(items[0].text);
							jQuery('#districtId').text(items[0].id);
						});
					}
				});
				
				
				jQuery('#saveAddrBtn').bind('tap',function(){
					var addId=jQuery(this).attr('data-id');
					var name=jQuery("#name").val();
					// 判断中文姓名
					 if(jQuery.trim(name).length == 0) {
					  	mui.alert('请输入姓名', '美丽乡村');
		        		return false;
					 } else {
					  if(isChinaName(jQuery.trim(name)) == false) {
					   	mui.alert('请输入中文姓名', '美丽乡村');
		        		return false;
					  }
					 }
					var mobile=jQuery("#mobile").val();
					// 判断手机号码
					 if (jQuery.trim(mobile).length == 0) { 
						 mui.alert('请输入手机号', '美丽乡村');
		        		 return false;
					} else {
						if(isPhoneNo(jQuery.trim(mobile)) == false) {
						     mui.alert('请输入正确的手机号', '美丽乡村');
		        			 return false;
						}
					 }
					var provinceId=jQuery('#provinceId').text();
					var cityId=jQuery('#cityId').text();
					var districtId=jQuery('#districtId').text();
					var province=jQuery('#province').val();
					if (jQuery.trim(province).length == 0) { 
						 mui.alert('请选择省份', '美丽乡村');
		        		 return false;
					}
					var city=jQuery('#city').val();
					if (jQuery.trim(city).length == 0) { 
						 mui.alert('请选择市', '美丽乡村');
		        		 return false;
					}
					var district=jQuery('#district').val();
					if (jQuery.trim(district).length == 0) { 
						 mui.alert('请选择区县', '美丽乡村');
		        		 return false;
					}
					
					var address=jQuery("#address").val();
					if (jQuery.trim(address).length == 0) { 
						 mui.alert('请输入详细地址', '美丽乡村');
		        		 return false;
					}
					var cityDetail=province+""+city+""+district;
					
					jQuery.ajax({
						type:'get',
						url:ajaxUrlPath+'/wx/address/save',
						data:{
							addressId:addId,
							provinceId:provinceId,
							cityId:cityId,
							districtId:districtId,
							name:name,
							mobile:mobile,
							address:address,
							cityDetail:cityDetail,
							isDeleted:0
						},
						success:function(data){
							if(data=='success'){
								mui.alert('保存成功', '美丽乡村', function() {
									window.location='receipt-address-info.html';
								});
							}else{
								mui.alert('网络不稳定，请稍后再试...', '美丽乡村');
							}
						},
						error:function(){
							mui.alert('网络不稳定，请稍后再试...', '美丽乡村');
						}
					});
				});
			});
		</script>
	</body>

</html>